<template>
  <div class="content-container">
    <el-tabs v-model="activeTab">
      <!-- 教学目标区域 -->
      <el-tab-pane label="教学目标" name="goal" >
        <div
          v-for="goal in resources.instructionPlanClips.filter(item=>item.type===1)"
          :key="goal.id"
          class="content-row-container"
        >

          <resource-content
            ref="goalItem"
            :content="goal.content"
            :folderID="folderID"
            :id="goal.id"
            :collectionId="goal.collectionId"
            :type="'goal'"
            @updateResource="$emit('updateResource')"
            @addMultipleCheckedList="addMultipleCheckedList"
          />
        </div>
        <div
          v-if="resources.instructionPlanClips.filter(item=>item.type===1) && resources.instructionPlanClips.filter(item=>item.type===1) .length"
          class="batch-operation"
        >
          <el-checkbox v-model="checkAllGoals" @change="changeAllGoals(checkAllGoals)">
            全选
          </el-checkbox>
          <el-button
            class="x-mini-btn"
            type="danger"
            plain size="mini"
            @click="showDeleteDialog">
            删除
          </el-button>
        </div>
        <div v-else class="empty">暂未收藏教学目标</div>
      </el-tab-pane>
      <!-- 教学重难点区域 -->
      <el-tab-pane label="教学重难点" name="key">
        <div
          v-for="key in resources.instructionPlanClips.filter(item=>item.type===2)"
          :key="key.id"
          class="content-row-container"
        >
          <resource-content
            ref="keyItem"
            :content="key.content"
            :folderID="folderID"
            :id="key.id"
            :type="'key'"
            :collectionId="key.collectionId"
            @updateResource="$emit('updateResource')"
            @addMultipleCheckedList="addMultipleCheckedList"
          />
        </div>
        <div
          v-if="resources.instructionPlanClips.filter(item=>item.type===2) && resources.instructionPlanClips.filter(item=>item.type===2).length"
          class="batch-operation"
        >
          <el-checkbox v-model="checkAllKeys" @change="changeAllKeys">
            全选
          </el-checkbox>
          <el-button class="x-mini-btn" type="danger" plain size="mini" @click="showDeleteDialog">
            删除
          </el-button>
        </div>
        <div v-else class="empty">暂未收藏教学重难点</div>
      </el-tab-pane>
      <!-- 教学准备等其他区域 -->
      <el-tab-pane label="教学准备等其他" name="others">
        <div
          v-for="others in resources.instructionPlanClips.filter(item=>(item.type===3)||(item.type===4))"
          :key="others.id"
          class="content-row-container"
        >
          <resource-content
            ref="othersItem"
            :content="others.content"
            :folderID="folderID"
            :id="others.id"
            :type="'others'"
            :collectionId="others.collectionId"
            @updateResource="$emit('updateResource')"
            @addMultipleCheckedList="addMultipleCheckedList"
          />
        </div>
        <div
          v-if="resources.instructionPlanClips.filter(item=>(item.type===3)||(item.type===4)) && resources.instructionPlanClips.filter(item=>(item.type===3)||(item.type===4)).length"
          class="batch-operation"
        >
          <el-checkbox v-model="checkAllOthers" @change="changeAllOthers">
            全选
          </el-checkbox>
          <el-button class="x-mini-btn" type="danger" plain size="mini" @click="showDeleteDialog">
            删除
          </el-button>
        </div>
        <div v-else class="empty">暂未收藏教学准备等其他教案内容</div>
      </el-tab-pane>
      <!-- 知识点（属性）区域 -->
      <el-tab-pane label="知识点（属性）" name="entity">
        <div
          v-for="content in resources.concepts"
          :key="content.collectionId"
          class="content-row-container"
        >
          <resource-content
            ref="entityItem"
            :content="content.content"
            :collectionId="content.collectionId"
            :folderID="folderID"
            :type="'content'"
            @updateResource="$emit('updateResource')"
            @addMultipleCheckedList="addMultipleCheckedList"
          />
        </div>
        <div
          v-if="resources.concepts && resources.concepts.length"
          class="batch-operation"
        >
          <el-checkbox
            v-model="checkAllEntities"
            @change="changeAllEntities(checkAllEntities)"
          >
            全选
          </el-checkbox>
          <el-button class="x-mini-btn" type="danger" plain size="mini" @click="showDeleteDialog">
            删除
          </el-button>
        </div>
        <div v-else class="empty">暂未收藏知识点</div>
      </el-tab-pane>
      <!-- 图片区域 -->
      <el-tab-pane label="图片" name="img" >
        <div
          class="content-row-container"
        >

          <resource-content
            v-for="(img) in resources.instructionPlanClips.filter(item=>item.type===20)"
            ref="imgItem"
            :key="img.id"
            :content="img.content"
            :folderID="folderID"
            :id="img.id"
            :collectionId="img.collectionId"
            :type="'img'"
            @updateResource="$emit('updateResource')"
            @addMultipleCheckedList="addMultipleCheckedList"
          />
        </div>
        <div
          v-if="resources.instructionPlanClips.filter(item=>item.type===20) && resources.instructionPlanClips.filter(item=>item.type===20) .length"
          class="batch-operation"
        >
          <el-checkbox v-model="checkAllImgs" @change="changeAllImgs(checkAllImgs)">
            全选
          </el-checkbox>
          <el-button
            class="x-mini-btn"
            type="danger"
            plain size="mini"
            @click="showDeleteDialog">
            删除
          </el-button>
        </div>
        <div v-else class="empty">暂未收藏教学目标</div>
      </el-tab-pane>
      <!-- 参考资源区域 -->
      <el-tab-pane label="参考资源" name="list">
        <div v-if="resources.resources" class="section">
          <div class="list">
            <list-item
              v-for="resource in resources.resources"
              ref="listItem"
              :key="resource.id"
              :resource="resource"
              :id="folderID"
              :collectionId="resource.collectionId"
              @updateResource="$emit('updateResource')"
              @addMultipleCheckedList="addMultipleCheckedList"
            />
          </div>
          <div
            v-if="resources.resources && resources.resources.length"
            class="batch-operation"
          >
            <el-checkbox
              v-model="checkAllResources"
              @change="changeAllResources(checkAllResources)"
            >
              全选
            </el-checkbox>
            <el-button
              class="x-mini-btn"
              type="danger"
              plain
              size="mini"
              @click="showDeleteDialog"
            >
              删除
            </el-button>
          </div>
          <div v-else class="empty">暂未收藏资源</div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 隐藏的a元素，用来在新窗口打开资源页面 -->
    <a
      v-show="false"
      ref="resourceTarget"
      class="resource-target"
      href=""
      target="_blank"
    ></a>
    <!-- {{ resources }} -->

    <!-- 确认删除的对话框 -->
    <el-dialog
      :visible.sync="deleteVisible"
      title="确认删除"
      width="350px"
      center
    >
      <span>确认删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="deleteVisible = false">
          取 消
        </el-button>
        <el-button size="medium" type="primary" @click="deleteResource">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { deleteResource } from '@/api/package'
import ListItem from '@/components/ResourcePackage/ListItem'
import ResourceContent from '@/components/ResourcePackage/ResourceContent'

export default {
  name: 'Resources',
  components: { ListItem, ResourceContent },
  props: {
    resourcesObj: {
      type: Object,
      default: null
    },
    folderID: String
  },
  data() {
    return {
      resources: null,
      activeTab: 'list',
      checkedResources: [],
      checkedEntities: [],
      checkedGoals: [],
      checkedKeys: [],
      checkedOthers: [],
      checkedImgs: [],
      checkAllResources: false,
      checkAllEntities: false,
      checkAllGoals: false,
      checkAllKeys: false,
      checkAllOthers: false,
      checkAllImgs: false,
      deleteVisible: false,
      multipleCheckedList: []
    }
  },
  watch: {
    resourcesObj: {
      handler(resourcesObj) {
        this.resources = { ...resourcesObj }
      },
      immediate: true
    }
  },
  methods: {
    viewResource(resourceID) {
      const target = this.$refs.resourceTarget
      target.setAttribute(
        'href',
        `${window.location.origin}/e-resource/#/resource/${resourceID}`
      )
      target.click()
    },
    addMultipleCheckedList(collectionId) {
      this.multipleCheckedList.push(collectionId)
    },
    showDeleteDialog() {
      this.deleteVisible = true
    },
    deleteResource() {
      if (this.multipleCheckedList.length === 0) {
        this.$message.warning('未选择要删除的资源')
        this.deleteVisible = false
        return
      } else {
        const info = {
          'collectionList': this.multipleCheckedList
        }
        deleteResource(info).then((response) => {
          const { code } = response.data
          if (code === 200) {
            this.$emit('updateResource')
            this.$message.success('删除成功！')
            this.deleteVisible = false
          } else {
            this.$message.error('删除失败，请稍后再试')
          }
        })
        this.multipleCheckedList = []
      }
    },
    changeAllResources(checked) {
      this.multipleCheckedList = []
      this.$refs.listItem.forEach((item) => {
        item.changeCheck(checked)
        this.multipleCheckedList.push(item.collectionId)
      })
    },
    changeAllEntities(checked) {
      this.multipleCheckedList = []
      this.$refs.entityItem.forEach((item) => {
        item.changeCheck(checked)
        this.multipleCheckedList.push(item.collectionId)
      })
    },
    changeAllGoals(checked) {
      this.multipleCheckedList = []
      this.$refs.goalItem.forEach((item) => {
        item.changeCheck(checked)
        this.multipleCheckedList.push(item.collectionId)
      })
    },
    changeAllKeys(checked) {
      this.multipleCheckedList = []
      this.$refs.keyItem.forEach((item) => {
        item.changeCheck(checked)
        this.multipleCheckedList.push(item.collectionId)
      })
    },
    changeAllOthers(checked) {
      this.multipleCheckedList = []
      this.$refs.othersItem.forEach((item) => {
        item.changeCheck(checked)
        this.multipleCheckedList.push(item.collectionId)
      })
    },
    changeAllImgs(checked) {
      this.multipleCheckedList = []
      this.$refs.imgItem.forEach((item) => {
        item.changeCheck(checked)
        this.multipleCheckedList.push(item.collectionId)
      })
    }
  }
}
</script>

<style>
.content-container {
  margin-top: 0.5rem;
}

.el-tabs__item {
  font-size: 1rem;
}

.section,
.empty {
  color: #606266;
}

.section h4 {
  color: #303133;
}

.section .list > div,
.content-row-container {
  margin-top: 0.8rem;
}

.section .list > div:first-child,
.content-row-container:first-child {
  margin-top: 0;
}

.section .list li div:hover {
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

.type-icon {
  height: 1.2rem;
  width: 1.2rem;
  margin-right: 0.3rem;
}

.batch-operation {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}

.x-mini-btn {
  margin-left: 1rem;
  padding: 4px 6px;
}
</style>
